<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-item label="生产区域">
              <CommonSelect v-model="Area" table="WorkshoArea" @select="(o,e)=>{this.$refs.table.refresh()}"></CommonSelect>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="生产单元">
              <CommonSelect v-model="queryParam.UnitId" table="WorkshoUnit" @select="(o,e)=>{this.$refs.table.refresh()}" :search="{ AreaId:Area }"></CommonSelect>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <s-table ref="table" size="default" rowKey="Id" :columns="columns" :data="loadData" showPagination="auto">
      <span slot="action" slot-scope="text, record">
        <template>
          <a v-action:Update @click="handleSetting(record)">工位配置</a>
        </template>
      </span>
    </s-table>
    <SettingForm ref="settingForm" @Success="()=>{this.$refs.table.refresh()}"></SettingForm>
  </a-card>
</template>

<script>
import moment from 'moment'
import { STable } from '@/components'
import MainSvc from '@/api/Define/WorkshoStationSvc'
import SettingForm from '../WorkshoStationSetting/List'
import EnumSelect from '@/components/CF/EnumSelect'
import EnumName from '@/components/CF/EnumName'
import CommonSelect from '@/components/CF/CommonSelect'

const columns = [
  { title: '生产单元', dataIndex: 'Unit.Name' },
  { title: '工位编码', dataIndex: 'Code' },
  { title: '工位名称', dataIndex: 'Name' },
  { title: '操作', dataIndex: 'action', width: '200px', scopedSlots: { customRender: 'action' } }
]

export default {
  components: {
    STable,
    MainSvc,
    EnumSelect,
    EnumName,
    SettingForm,
    CommonSelect
  },
  data() {
    this.columns = columns
    return {
      // create model
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: { UnitId: '', Keyword: '' },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        var _query = Object.assign({}, { ...this.queryParam })
        for (const key in _query) {
          if (moment.isMoment(_query[key])) {
            _query[key] = _query[key].format('YYYY-MM-DD')
          }
        }
        const requestParameters = Object.assign({ sortField: 'Code', sortOrder: 'asc', Search: _query }, parameter)
        console.log('loadData request parameters:', requestParameters)
        return MainSvc.GetPage(requestParameters)
      },
      selectedRowKeys: [],
      selectedRows: [],
      Area: ''
    }
  },
  filters: {
  },
  created() {},
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  methods: {
    moment,
    handleSetting(record) {
      this.visible = true
      this.mdl = { ...record }
      this.$refs.settingForm.openDrawer(record)
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    resetSearchForm() {
      this.queryParam = { Keyword: '' }
    }
  }
}
</script>
